<template>
<div>
  <div class="toolbar-wrapper">
    <div class="left-slider-wrapper">
      <a target="_blank" class="service-wrapper">
        <div class="server-icon"></div>
        <div class="title">建议</div>
      </a>
      <div
        v-show="showtop"
        @click="totop"
        ref="top"
        class="scroll-top-wrapper"
        style="
          transform: translate3d(0px, 0px, 0px);
          transition: all 0.55s ease 0s;
        "
      >
        <div class="scroll-cion"></div>
        <div class="title">顶部</div>
      </div>
    </div>
  </div>
  </div>
</template>

<script>

export default {
  name: "SideNavgation",
  data() {
    return {
      showtop: false,
      
    };
  },
  mounted() {
     window.addEventListener("scroll", this.handleScroll);
   
  },
  destroyed(){
document.removeEventListener("scroll", this.handleScroll);
  },

  methods: {
    totop(){
      
     
      let timer = setInterval(() => {
        let ispeed = Math.floor(-this.scrollTop / 10);
        document.documentElement.scrollTop = document.body.scrollTop =
          this.scrollTop + ispeed;
        if (this.scrollTop === 0) {
          clearInterval(timer);
        }
      }, 10);

      
         
           
    },

    handleScroll(e) {
      let scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;
       
         this.scrollTop =scrollTop

      if (scrollTop > 500) {
        this.showtop = true;
      } else {
        this.showtop = false;
      }
    },
  },
};
</script>

<style  scoped>


.toolbar-wrapper {
  /* border: 1px solid black; */
  z-index: 10;
  width: 78px;
  

  background: #fff;
  box-shadow: 0 2px 22px 0 rgba(214, 186, 216, 0.5);
  border-radius: 12px;
  position: fixed;
  right: 60px;
  bottom: 100px;
  text-align: center;
  color: #f25d8e;
}
.toolbar-wrapper a {
  cursor: pointer;
  margin-top: 15px;
  display: block;
}
.toolbar-wrapper a .server-icon {
  width: 30px;
  height: 30px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  margin: auto;
  background-image: url(../../assets/images/datou.png);
}
.toolbar-wrapper a .title {
  color: #f25d8e;
  margin-top: 4px;
  margin-bottom: 15px;
}
.toolbar-wrapper .scroll-top-wrapper {
  margin-bottom: 15px;
  cursor: pointer;
  display: block;
    margin-top: 15px;
}
.toolbar-wrapper .scroll-top-wrapper .scroll-cion {
  width: 30px;
  height: 30px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  margin: auto;
  background-image: url(../../assets/images/top.png);
}
.toolbar-wrapper .scroll-top-wrapper .title{
      color: #f25d8e;
    margin-top: 4px;
        margin-bottom: 15px;
}

</style>
